<template>
  <el-dialog
    :title="title"
    :visible="showDialog"
    :close-on-click-modal="false"
    @close="clearForm"
  >
    <!--    放置弹层内容-->
    <el-form ref="formData" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="formData.name" placeholder="2-10个字符" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="formData.code" placeholder="2-10个字符" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="managerId" label="部门负责人">
        <el-select v-model="formData.managerId" placeholder="请选择负责人" style="width: 80%" size="mini">
          <el-option v-for="(manager,index) in allManager" :key="manager.id" :label="manager.username" :value="index" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input
          v-model="formData.introduce"
          placeholder="1-100个字符"
          type="textarea"
          size="mini"
          :rows="4"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
            <el-button size="mini" @click="clearForm">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { getAllManager, addDepartment, getDepartmentDetails, updateDepartmentDetails } from '@/api/department'

export default {
  name: 'ReviseDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: Number,
      default: null
    },
    allDepartment: {
      type: Array,
      default: null
    },
    title: {
      type: String,
      default: '操作部门'
    },
    dialogType: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      formData: {
        code: '', // 部门编码
        name: '', // 部门名称
        managerId: null, // 部门负责人id
        introduce: '', // 部门介绍
        pid: '' // 父级部门id
      },
      allManager: [],
      // 详情页
      departmentDetail: {
        code: '', // 部门编码
        name: '' // 部门名称
      },
      // allDepartment: [],
      rules: {
        // 部门编码
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '部门编码长度为2-10个字符', trigger: 'blur' },
          {
            validator: (_rule, value, callback) => {
              // 检查res 是否存在value值
              if (this.allDepartment.some(item => item.code === value && value !== this.departmentDetail.code)) {
                callback(new Error('部门名称已存在'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        // 部门名称
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '部门名称长度为2-10个字符', trigger: 'blur' },
          {
            validator: async(_rule, value, callback) => {
              // 检查res 是否存在value值
              if (this.allDepartment.some(item => item.name === value && value !== this.departmentDetail.name)) {
                callback(new Error('部门名称已存在'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }],
        // 部门负责人id
        managerId: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        // 部门介绍
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 100, message: '部门编码长度为1-100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.allManager = await getAllManager()
    // this.allDepartment = await getDepartment()
  },
  methods: {
    close() {
      // 修改父组件的值
      this.$emit('update:showDialog', false)
    },
    async addDepartment() {
      await addDepartment({ ...this.formData, pid: this.currentNodeId })
      this.$notify({
        title: '添加子部门成功',
        message: this.formData.name + ' 部门添加成功',
        type: 'success'
      })
    },
    async updateDepartmentDetails() {
      await updateDepartmentDetails(this.currentNodeId, { ...this.formData, pid: this.currentNodeId })
      this.$notify({
        title: '修改部门信息成功',
        message: this.formData.name + ' 部门修改成功',
        type: 'success'
      })
    },
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addDepartment()
          } else {
            this.updateDepartmentDetails()
          }
          this.$nextTick(() => {
            this.clearForm()
            this.$emit('update')
          })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    clearForm() {
      this.$refs.formData.resetFields()
      this.close()
    },
    // 获取组织详情
    async gerDepartmentDetail() {
      const res = await getDepartmentDetails(this.currentNodeId)
      // 给表详情页赋值
      this.departmentDetail.code = res.code
      this.departmentDetail.name = res.name
      // 给表单页赋值
      this.formData.code = res.code
      this.formData.name = res.name
      this.formData.managerId = res.managerId
      this.formData.introduce = res.introduce
    }
  }
}
</script>

<style scoped lang="scss">

</style>
